.photo-grid{
  position: relative;
  margin-top: 92px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 284px);
  gap: 16px;
  justify-content: center;
  padding: 0 48px;
}

@media screen and (max-width: 1024px) {
  .photo-grid{
    grid-template-columns: repeat(auto-fit, 300px);
    gap: 14px;
  }
}

@media screen and (max-width: 768px) {
  .photo-grid{
    padding: 0 24px;
    margin-top: 88px;
    grid-template-columns: repeat(auto-fit, minmax(min-content, 352px));
    gap: 16px;
    width: calc(100% - 48px);
  }
}

@media screen and (max-width: 320px) {
  .photo-grid{
    padding: 0 16px;
    margin-top: 64px;
    grid-template-columns: repeat(auto-fit, 288px);
    gap: 12px;
    width: calc(100% - 32px);
  }
}